<template>
	<app-form name="withdrawFundsForm">
		<div class="alert"><translate>dash.funds.withdraw.form_help_html</translate></div>

		<app-form-group
			v-if="!user.paypal_id"
			name="email_address"
			:label="$gettext(`dash.funds.withdraw.email_label`)"
		>
			<p class="help-block above"><translate>dash.funds.withdraw.email_help</translate></p>
			<app-form-control :type="email" />
			<app-form-control-errors />
		</app-form-group>

		<div v-else class="form-group">
			<label class="control-label"><translate>Current PayPal Account</translate></label>
			<div class="form-static">{{ user.paypal_email_address }}</div>
			<p class="help-block">
				<translate>You can link a different PayPal account in your payment setup.</translate>
				<router-link :to="{ name: 'dash.account.financials' }">
					<translate>Go to your financials page.</translate>
				</router-link>
			</p>
		</div>

		<app-form-group name="amount" :label="$gettext(`dash.funds.withdraw.amount_label`)">
			<p class="help-block above">
				<translate :translate-params="{ amount: currency(minAmount * 100) }">
					The minimum amount you can withdraw at this time is %{ amount }.
				</translate>
			</p>
			<div class="input-group">
				<span class="input-group-addon">$</span>
				<app-form-control
					type="currency"
					step="1"
					:rules="{
						min_value: minAmount,
						max_value: withdrawableAmount,
					}"
				/>
			</div>
			<app-form-control-errors />
		</app-form-group>

		<app-form-button>
			<translate>dash.funds.withdraw.submit_button</translate>
		</app-form-button>
	</app-form>
</template>

<script lang="ts" src="./withdraw-funds"></script>
